export const Teleport = {
  name: "Teleport",
  __isTeleport: true,

  /**
   * @description Teleport组件，将插槽内容移动到to属性制定的容器中
   * @param {*} oldVnode 旧虚拟节点
   * @param {*} vnode 新虚拟节点
   * @param {*} container 挂载容器
   * @param {*} anchor 锚点
   * @param {*} interals 渲染器内部方法
   */
  process(oldVnode, vnode, container, anchor, interals) {
    const { patch, patchChildren, move } = interals;
    /* 挂载 */
    if (!oldVnode) {
      /* 获取容器 */
      const target =
        typeof vnode.props.to === "string"
          ? document.querySelector(vnode.props.to)
          : vnode.props.to;

      /* 将插槽中的虚拟节点全部挂载到容器中去 */
      vnode.children.forEach((child) => patch(null, child, target, anchor));
    } else {
      /* 更新 */
      patchChildren(oldVnode, vnode, container);
      /* Teleport的特殊情况亲馋，当 to 属性的值被修改时，需要移动插槽里面的内容到新的挂载容器中 */
      /* 获取容器 */
      const newTarget =
        typeof vnode.props.to === "string"
          ? document.querySelector(vnode.props.to)
          : vnode.props.to;

      vnode.children.forEach((child) => move(child, newTarget));
    }
  },
};
